<template>
  <div id="search">
    <h1 style="font-size: 30px; margin-bottom: 10px">查找Blog</h1>
    <el-row :gutter="20">
      <el-col :span="18" :xs="16">
        <el-input
          v-model="blogTitle"
          name="blogTitle"
          maxlength="20"
          show-word-limit
          placeholder="请输入你想查找的Blog标题名"
        >
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button @click="searchBlog">查找</el-button>
      </el-col>
    </el-row>
    <el-row v-show="isshow">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        v-loading="loading"
      >
        <el-table-column
          prop="userName"
          label="创建人"
          width="100px"
        ></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="modifyDate" label="修改日期"></el-table-column>
        <el-table-column prop="readCount" label="阅读次数"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="preview(scope.row)" type="text">查看</el-button>
            <el-button @click="edit(scope.row)" type="text">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        :page-sizes="[4, 8, 12]"
      >
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Search",
  data() {
    return {
      tableData: [],
      loading: true,
      currentPage: 1, //当前页数
      pageSize: 4, //当前页记录数
      total: 0, //总条数
      blogTitle: "",
      isshow: false,
    };
  },
  methods: {
    searchBlog() {
      if (this.blogTitle == "") {
        this.$message.error("请输入你想查找的Blog");
        this.isshow = false; 
        this.$store.commit('clear');
      } else {
        let form = new FormData();
        form.append("title", this.blogTitle);
        this.axios.post("/blog/search", form).then((res) => {
          if (res.data.success) {
            this.tableData = res.data.data;
            this.$store.state.searchResult.blogTitle = this.blogTitle;
            this.$store.state.searchResult.tableData = this.tableData;
            this.total = this.tableData.length;
            this.$message.success(res.data.msg);
            this.isshow = true;
            this.loading = false;
          } else {
            this.$message.error(res.data.msg);
            this.isshow = false;
          }
        });
      }
    },
    preview(row) {
      this.$router.push("./Blog/BlogDetail/" + row.blogId);
    },
    edit(row) {
      this.$router.push("./Blog/edit/" + row.blogId);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  created() {
    if (this.$store.state.searchResult.tableData.length != 0) {
      this.blogTitle = this.$store.state.searchResult.blogTitle;
      this.tableData = this.$store.state.searchResult.tableData;
      this.total = this.$store.state.searchResult.tableData.length;
      this.isshow = true;
      this.loading = false;
    }
  },
};
</script>

<style>
</style>